<template>
  <el-col :span="8" type="flex" justify="center">
    <el-row>{{ currentTime }}</el-row>
    <el-row>
      <map-panel />
    </el-row>
    <el-row> 底部数据</el-row>
  </el-col>
</template>

<script>
import MapPanel from "./MapPanel";

export default {
  name: "MiddlePanel",

  components: {
    MapPanel
  },
  props: {},
  data() {
    return {
      timer: null, //定义一个定时器的变量
      currentTime: null // 获取当前时间
    };
  },

  mounted() {
    let _this = this; // 声明一个变量指向Vue实例this，保证作用域一致
    this.timer = setInterval(() => {
      let newDate = new Date();
      _this.currentTime =
        newDate.getFullYear() +
        "-" +
        (newDate.getMonth() + 1) +
        "-" +
        newDate.getDate() +
        " " +
        newDate.getHours() +
        ":" +
        newDate.getMinutes() +
        ": " +
        newDate.getSeconds(); //修改数据date
    }, 1000);
  },

  methods: {}
};
</script>
<style scoped></style>
